<template>
  <div class="rdioSelect aliCenter">
    <div
      @click="selectFn(index)"
      :class="item.select ? 'rdio' : 'rdio2'"
      v-for="(item, index) in radioData"
      :key="index"
    >
      {{ item.title }}
    </div>
  </div>
  <div class="inputSerachBox">
    <div class="inputSerachBox2">
      <input
        type="text"
        class="inputSerach"
        v-model="serchData"
        :placeholder="$t('messages.Warranty.serach')"
      />
      <div class="blackCircle center" @click="getData">
        <el-icon color="white" class="RigthIcon"><Right /></el-icon>
      </div>
    </div>
  </div>
  <div class="list">
    <div class="listBox" @click="goDetilsFn(item)" v-for="(item, index) in list" :key="index">
      <div class="card">
        <div class="cardTop title aliCenter">
          <div>Warranty Serial Number：{{ item.filmNo }}</div>
        </div>
        <div class="cardContent">
          <el-row>
            <el-col :span="24" class="col size2">
              <div>Last Name:{{ item.ownerFirstName }}</div>
            </el-col>
            <el-col :span="24" class="col size2">
              <div>First Name:{{ item.ownerLastName }}</div>
            </el-col>

            <el-col :span="24" class="col size2">
              <div>Phone Number: {{ item.ownerPhone }}</div>
            </el-col>
            <el-col :span="24" class="col size2">
              <div>Vehicle Type: {{ item.carName }}</div>
            </el-col>

            <el-col :span="24" class="col size2">
              <div>License Plate Number: {{ item.carNo }}</div>
            </el-col>
            <el-col :span="24" class="col size2">
              <div>Chassis Number (VIN): {{ item.carVIN }}</div>
            </el-col>

            <el-col :span="24" class="col size2">
              <div>Warranty Periodr: {{ item.filmAge }}</div>
            </el-col>
          </el-row>
        </div>
        <!-- <div class="button Consigness">Consignees</div> -->
        <!-- <div class="button Rejection">Rejection</div> -->
      </div>
    </div>
    <div class="pageButton center" v-if="total > 0">
      <div>
        <el-icon @click="pageFn(-1)" class="ArrowLeftBold" size="50" :color="ArrowLeftBoldColor"
          ><ArrowLeftBold
        /></el-icon>
      </div>
      <div>
        <el-icon @click="pageFn(1)" class="ArrowRightBold" size="50" :color="ArrowRightBoldColor"
          ><ArrowRightBold
        /></el-icon>
      </div>
    </div>
    <div class="listBotton center">
      <div class="botton" @click="addFn">Upload</div>
    </div>
  </div>
  <!-- 添加车辆 -->
  <el-dialog v-model="dialogVisibleAddVehicleFn" :show-close="false" :before-close="handleClose">
    <div class="AddVehiclenCard">
      <div class="AddVehiclenCardTop aliCenter">New vehicles Added</div>
      <div class="AddVehiclenCardContent">
        <div class="left">
          <div class="upBOx" @click="upImgFn" v-if="!upImg">
            <div class="upImg center">+</div>
            <input ref="inputFile" type="file" style="display: none" @change="handleFileUpload" />
          </div>
          <div v-else class="imgBox">
            <img :src="upImg" alt="" />
            <div class="Mask center">
              <div @click="magnifyFn">
                <el-icon color="white"><Search /></el-icon>
              </div>
              <div @click="deleteImgFn">
                <el-icon color="red"><Delete /></el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="rigth">
          <el-form :model="form" label-width="auto">
            <el-form-item label="License plate type:">
              <el-radio-group v-model="formData.type">
                <el-radio value="0">Blue Label</el-radio>
                <el-radio value="1">Green card</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="License plate number:">
              <el-input class="inpute1" v-model="formData.number" />
            </el-form-item>
            <el-form-item label="Chassis Number (VIN):">
              <el-input class="inpute1" v-model="formData.VIN" placeholder="" />
            </el-form-item>
          </el-form>
          <div class="center">
            <div class="cofimButton center">Confirm</div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
  <!-- 放大图片 -->
  <el-dialog
    class="el-dialog__body2"
    v-model="dialogVisibleMagnifyFn"
    :show-close="false"
    :before-close="handleClose"
  >
    <div class="bakImg">
      <img :src="upImg" alt="" srcset="" />
    </div>
  </el-dialog>
</template>

<script setup>
import { storeQualityListSamll } from '@/http/api/my.js'
import { Delete, Search } from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
let dialogVisibleMagnifyFn = ref(false)
let dialogVisibleAddVehicleFn = ref(false)
let formData = reactive({})
let inputFile = ref(null)
let serchData = ref('')
let upImg = ref('')
let radioData = ref([
  {
    title: 'Rejected',
    select: true,
    status: 2
  },
  {
    title: 'Pending approval',
    select: false,
    status: 1
  }, {
    title: 'Completed',
    select: false,
    status: 0
  }
])
let selectRdio = ref(0)
let selectStatus = ref(2)
const selectFn = (number) => {
  ArrowRightBoldColor.value = '#ffdd00'
  ArrowLeftBoldColor.value = '#ffdd00'
  selectRdio.value = number
  radioData.value.forEach((item, index) => {
    if (index == number) {
      item.select = true
      selectStatus.value = item.status
      getData()
    } else {
      item.select = false
    }
  })
}
const magnifyFn = () => {
  dialogVisibleMagnifyFn.value = true
}
const goDetilsFn = (data) => {
  router.push(`/warranty?id=${data.id}`)
}
const addFn = () => {
  router.push('/WarrantyAdd')
}
const upImgFn = () => {
  inputFile.value.addEventListener('change', async function (event) {
    var files = event.target.files[0]
    const formData = new FormData()
    //files 文件信息
    formData.append("uploadFiles", files)
    //提交的其他字段
    // 发送ajax请求
    const res = await uploadAvatar(formData)
    upImg.value = res.image_url

  })
  // 将input添加到文档中
  // document.body.appendChild(input);
  inputFile.value.click()
}
let pageData = reactive({
  page: 1,
  size: 10
})
let total = ref(0)
let list = ref([])
const getData = async () => {
  let storeInfo = JSON.parse(localStorage.getItem('storeInfo'))
  let data = {
    storeId: storeInfo.id,
    status: selectStatus.value,
    serchData: serchData.value,
    ...pageData
  }
  const res = await storeQualityListSamll(data)
  list.value = res.res.map((item) => {
    return {
      ...item,
      carName: JSON.parse(item.carName).join('/')
    }
  })
  total.value = res.total
  if (pageData.page * pageData.size <= 10) {
    ArrowLeftBoldColor.value = '#717171'
  }
  if (total.value <= 10) {
    ArrowRightBoldColor.value = '#717171'
  }
}
let ArrowLeftBoldColor = ref('#ffdd00')
let ArrowRightBoldColor = ref('#ffdd00')
const pageFn = (data) => {
  if (data < 0) {
    if (pageData.page * pageData.size != 10) {
      pageData.page = pageData.page + data == 0 ? 1 : pageData.page + data
      getData()
      ArrowRightBoldColor.value = '#ffdd00'
    } else {
      ArrowLeftBoldColor.value = '#717171'
    }
  } else {
    if (pageData.page * pageData.size <= total.value) {
      pageData.page = pageData.page * pageData.size < total.value ? pageData.page + data : pageData.page
      getData()
      ArrowLeftBoldColor.value = '#ffdd00'
      if (pageData.page * pageData.size >= total.value) {
        ArrowRightBoldColor.value = '#717171'
      }
    } else {
      ArrowRightBoldColor.value = '#717171'
    }
  }

}
onMounted(() => {
  serchData.value = route.query.serachData
  getData()
})
const deleteImgFn = () => {
  upImg.value = ''
}
</script>

<style lang="scss" scoped>
.inputSerach::placeholder {
  font-size: 18px;
}
.pageButton {
  width: 100%;
  margin-top: 20px;
  .storeListRow {
    height: 300px;
    margin-top: 10px;
  }
  .ArrowLeftBold {
    cursor: pointer;
  }
  .ArrowRightBold {
    cursor: pointer;
  }
  .ArrowLeftBold:active {
    color: black;
  }
  .ArrowRightBold:active {
    color: black;
  }
}
.listBox {
  width: 100%;
  margin-top: 45px;
  margin-left: 50px;
  cursor: pointer;
  .card {
    width: 1800px;
    border-radius: 20px;
    overflow: hidden;
    background: #1a1c1d;
    position: relative;
    .cardTop {
      height: 100px;
      width: 100%;
      background: #ffdd00;
      padding: 0 20px;
      font-weight: bold;
      color: black;
    }
    .cardContent {
      padding: 10px 50px;
      font-size: 24px;
      color: white;
      height: 500px;
    }
  }
}
.listBotton {
  width: 100%;
  .botton {
    width: 170px;
    height: 70px;
    background: #ffdd00;
    font-weight: bold;
    font-size: 18px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    color: black;
    margin-top: 20px;
  }
  .botton:active {
    background: black;
    color: white;
  }
}
.AddVehiclenCard {
  width: 1800px;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  background: #1a1c1d;
  .AddVehiclenCardTop {
    height: 100px;
    width: 100%;
    background: #ffdd00;
    font-size: 24px;
    padding: 0 20px;
    font-weight: bold;
    color: black;
  }
}
.AddVehiclenCardContent {
  display: flex;
  padding: 10px;
  .left {
    margin-right: 30px;
    margin-left: 50px;
  }
}
.upImg {
  background: #3c3c3c;
  width: 260px;
  height: 260px;
  border-radius: 20px;
  font-size: 50px;
  cursor: pointer;
}

.imgBox {
  width: 260px;
  height: 260px;
  border-radius: 20px;
  position: relative;
  left: 0;
  top: 0;
  img {
    width: 100%;
    height: 100%;
  }
  .Mask {
    background: black;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: space-around;
    font-size: 30px;
  }
  .Mask:hover {
    opacity: 0.6;
  }
  cursor: pointer;
}

.bakImg {
  width: 800px;
  height: 800px;
  img {
    width: 100%;
    height: 100%;
  }
}
::v-deep .el-dialog__body2 {
  width: 800px !important;
}
::v-deep .el-form-item__label {
  font-size: 30px;
  color: white;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #ffdd00;
  border: #ffdd00;
}
::v-deep .el-radio__input .is-checked {
  color: white !important;
  font-size: 24px;
}
.col {
  width: 100%;
  height: 40px;
  margin-top: 20px;
}
::v-deep .el-radio__label {
  color: white !important;
  font-size: 24px;
}
::v-deep .el-input {
  height: 40px;
}
::v-deep .el-input__wrapper {
  background: #242424 !important;
  border: 1px solid rgb(255, 221, 0);
  box-shadow: 0 0 !important;
}
.inpute1 {
  width: 800px;
}
.inpute2 {
  width: 1300px;
}

.cofimButton {
  width: 220px;
  height: 70px;
  background: #ffdd00;
  border-radius: 20px;
  font-size: 30px;
  font-weight: bold;
  color: black;
  cursor: pointer;
}
.cofimButton:active {
  background: black;
  color: white;
}
.qualityImg {
  width: 700px;
  height: 480px;
  img {
    width: 100%;
    height: 100%;
  }
}
.button {
  width: 180px;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  right: 50px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 26px;
  color: black;
}
.Consigness {
  background: #ffdd00;
}
.Rejection {
  background: #ff1f1f;
}
.rdioSelect {
  margin-top: 50px;
  margin-left: 50px;
  margin-bottom: 50px;
  .rdio {
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffdd00;
    margin-right: 20px;
  }
  .rdio2 {
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    margin-right: 20px;
  }
}
.inputSerach {
  border: none;
  width: 950px;
  height: 70px;
  border-radius: 20px;
  font-size: 18px;
}
.inputSerach:focus {
  border: none !important;
  outline: none;
}
.inputSerachBox {
  padding-left: 50px;
  position: relative;
  cursor: pointer;
}
.inputSerachBox2 {
  cursor: pointer;
  width: 1800px;
  height: 70px;
  border-radius: 20px;
  background: white;
}
.blackCircle {
  background: black;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  position: absolute;
  right: 65px;
  top: 50%;
  transform: translateY(-50%);
}
.RigthIcon {
  font-size: 25px;
}
</style>